<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图测试</title>
    <style>
			*{margin: 0;padding: 0;}
li{list-style: none;}
img{margin: 0;
	display: block;
  }
a{text-decoration: none;}
div{
	display: block;
}
.clearfloat{clear:both}
    /*轮播图*/
.banner{
	position: relative;
	width:100%;
	margin:0 auto;
	overflow: hidden;
}
.out{
	width: 100%;
	overflow: hidden;
}
.out .img li{
	width: 100%;
	position: relative;
	top: 0;
	left: 0;
	display: none;
	overflow: hidden;
	}
.out .img li img{
	width: 100%;
}
.out .num{
	position: absolute;
	bottom: 50px;
	left:calc(50% - 150px);
	
}
.out .num li{
	width: 100px;
	height:4px;
	background: white;
	margin: 0 1px;
	text-align: center;
	display:inline-block;
	cursor: pointer;
	transform:skew(-45deg)
}
.out .num li.active{
	background: black;
}

.audit{
	width: 100%;
	position: relative;
	background: no-repeat center center fixed;
	background-image: initial;
	background-position-x: center;
	background-position-y: center;
	background-size: cover;
	background-attachment: fixed;
	background-origin: initial;
	background-clip: initial;
	background-color: initial;
	perspective: 1000px;
}
.audit_words img,.banner1_words img,.banner2_words img{
	width: 100%;
	position: absolute;
	top:0;
	left: 0;
	transition: transform 0.3s;	
}





@media screen and (max-width:1440px){
	.banner{
		width:100%;
		margin:0 auto;
	}
	.audit,.banner2{
		width: 100%;
		height: 100%;
	}
	.banner1{
		width: 100%;
		height: 100%;
	}
	.out .num{position: absolute;bottom: 50px;left:calc(50% - 90px);}
	.out .num li{width: 60px;height:4px;background: white;margin: 0 1px;text-align: center;display:inline-block;
	cursor: pointer;transform:skew(-45deg)}
	.out .num li.active{background: black;}
	.out .img li a{position: relative;width:100%;overflow: hidden;margin:0 auto;}
	
}

@media screen and (max-width:1024px){
	.banner{
		width:100%;
		margin:0 auto;
	}
	.audit,.banner2{
		width: 100%;
		height: 100%;
	}
	.banner1{
		width: 100%;
		height: 100%;
	}
	.out .num{position: absolute;bottom: 50px;left:calc(50% - 90px);}
	.out .num li{width: 60px;height:4px;background: white;margin: 0 1px;text-align: center;display:inline-block;
	cursor: pointer;transform:skew(-45deg)}
	.out .num li.active{background: black;}
	.out .img li a{position: relative;width:100%;overflow: hidden;margin:0 auto;}
	
}
@media screen and (max-width:750px) {
	.banner{
		width:100%;
		margin:0 auto;
	}
	.audit,.banner2{
		width: 100%;
		height: 100%;
	}
	.banner1{
		width: 100%;
	}
	.out .num{position: absolute;bottom: 40px;left:calc(50% - 45px);}
	.out .num li{width: 30px;height:2px;background: white;margin: 0 1px;text-align: center;display:inline-block;
	cursor: pointer;transform:skew(-45deg)}
	.out .img li img{
		width: 100%;
		height: 100%;
	}
	.out .num li.active{background: black;}
	.out .img li a{position: relative;width:100%;overflow: hidden;margin:0 auto;}
	
}
@media screen and (max-width:500px){
	.banner{
		width:100%;
		margin:0 auto;
	}
	.out .num{position: absolute;bottom: 20px;left:calc(50% - 45px);}
}

    
    </style>
</head>
<body>
    	<!--轮播图-->
		<div class="banner">
			<div class="out">
				<ul class="img">
					<li>
						<div class="audit" style="background-image: url(banner6.jpg);">
							<img src="banner8.png" alt=""/>
							<div class="audit_words">
								<img src="banner5.png"/>
								<img src="banner7.png"/>
								<img src="banner4.png"/>
							</div>
						</div>
					</li>
					<li>
						<div class="banner1">
							<img src="banner2.jpg" alt="" />
							<!--<img src="img/banner8.png" alt="" />
							<div class="banner1_words">
								<img src="img/banner5.png"/>
								<img src="img/banner7.png"/>
								<img src="img/banner4.png"/>
							</div>-->
						</div>
					</li>
					<li>
						<div class="banner1">
							<img src="banner3.jpg" alt="" />
							<!-- <div class="banner2_words">
								<img src="img/banner5.png"/>
								<img src="img/banner7.png"/>
								<img src="img/banner4.png"/>
							</div> -->
						</div>
					</li>
					<div class="clearfloat"></div>
				</ul>
				
				
				
				<ul class="num">
					<li class="active"></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		
		</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
//轮播图
$(function(){
			//手动控制轮播
			$(".img li").eq(0).show()
			$(".num li").mouseover(function(){
				$(this).addClass("active").siblings().removeClass("active")
				
				var index=$(this).index();
				i=index;
				$(".img li").eq(index).stop().fadeIn(600).siblings().stop().fadeOut(300);
			})
			
			
			//自动轮播
			var i=0;
			var t=setInterval(move,3000)
			
			
			//核心向左运动函数
			function moveL(){
				i--;
				if(i==-1){
					i=2;
				}
				$(".num li").eq(i).addClass("active").siblings().removeClass("active")
				$(".img li").eq(i).fadeIn(600).siblings().fadeOut(300);
			}
			
			
			
			//核心向右运动函数
			function move(){
				i++;
				if(i==3){
					i=0;
				}
				$(".num li").eq(i).addClass("active").siblings().removeClass("active")
				$(".img li").eq(i).fadeIn(600).siblings().fadeOut(300);
			}
			
			
			
			
			//定时器的开始与结束
			$(".out").hover(function(){
				clearInterval(t)
			},function(){
				t=setInterval(move,3000);
			})
			
			
		})
		




		
		
		//banner图悬浮事件
		
		$('.audit').on('mousemove', function(e){
	  var offset = $('.audit').offset()
	  var x = e.pageX - offset.left
	  var y = e.pageY - offset.top
	
	  var centerX = $('.audit').outerWidth() /2
	  var centerY = $('.audit').outerHeight() /2

	  var deltaX = x - centerX
	  var deltaY = y - centerY
	
	  var percentX = deltaX / centerX
	  var percentY = deltaY / centerY
	  var deg = 10
	
	  $('.audit_words img').css({
	    transform: 'rotateX('+deg*-percentY + 'deg)'+
	    ' rotateY('+deg*percentX+'deg)'
	  })
	})
	
	$('.audit').on('mouseleave', function(){
	  $('.audit_words img').css({
	    transform: ''
	  })
	})
</script>
</html>